<template>

  <div>
    <div class="margin-container-list">
      <!--商品状态 -->
      <!--顶部搜索 -->
      <div class="top-operate">
        <div class="pad-t-15">
          <el-select v-model="searchListQuery.realFlag" placeholder="是否实名">
            <el-option key="未实名" label="未实名" :value="0"></el-option>
            <el-option key="已实名" label="已实名" :value="1"></el-option>
          </el-select>
          <el-date-picker v-model="datePicker"
                          type="daterange"
                          unlink-panels
                          range-separator="至"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间">
          </el-date-picker>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table  ref="multipleTable" :data="dataList" v-loading="listLoading"
                   element-loading-text="加载中" style="width: 100%" >

          <el-table-column width="240px" label="微客名称" fixed="left">
            <template slot-scope="scope">
              <div @click="handleUpdate(scope.row)" class="flex v-align-c cursor-p">
                <label><img :src="scope.row.avatar" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>昵称：{{scope.row.nickname}}</div>
                  <div>姓名：{{scope.row.realName}}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column width="240px" label="性质" prop="nature" >
            <template slot-scope="scope">
              <span>{{ dict.nature[scope.row.nature]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="标签" prop="">
            <template slot-scope="scope">
              <template v-for="label in scope.row.memberLabelDTOS">
              {{label.labelName }}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="注册时间" prop="createTime"></el-table-column>
          <el-table-column width="240px" label="是否实名" prop="realFlag">
            <template slot-scope="scope">
              <template v-if="scope.row.realFlag == 0">
                <span>未实名</span>
              </template>
              <template v-if="scope.row.realFlag == 1">
                <span>已实名</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column width="240px" :label="(getVersionType() == 1 || getVersionType() == 3) ? 'TA共赚取酬金' : '分销订单金额'" prop="amount"></el-table-column>

          <el-table-column width="140px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<style lang="less" scoped>
  .span-member-1 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .span-member-2 {
    margin-right: 10px;
  }
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { pageEnterpriseMember } from '@/api/user/enterprise-member'
  import { getDictByGroupName } from '@/api/common/common'

  export default {
    data() {
      return {
        total: null,
        listLoading: true,
        searchListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          realFlag: ''
        },
        searchLabelType: '',
        searchKeyword: '',
        dict: {},
        pagingStatus: '0',
        categoryIds: [],
        dataList: [],
        // 商品的所有分类json
        categoryData: [],
        datePicker: []
      }
    },
    // 初始化页面
    created() {
      this.initDict()
      this.initDataList()
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initDataList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initDataList()
      },
      initDict() {
        getDictByGroupName('MemberDTO').then(response => {
          this.dict = response.data
        })
      },
      initDataList() {
        if (this.datePicker.length > 0) {
          this.searchListQuery['startDate'] = this.datePicker[0]
          this.searchListQuery['endDate'] = this.datePicker[1]
        }
        pageEnterpriseMember(this.searchListQuery).then(response => {
          this.total = response.total
          this.dataList = response.records
          this.listLoading = false
        })
      },
      // 详情
      handleDetail(row) {
        this.$router.push({ path: '/user/member/details/index', query: { memberId: row.memberId, enterpriseId: this.getEnterpriseId() }})
      },
      handleSearch() {
        this.initDataList()
      }
    }
  }

</script>
